<template>
  <div id="app">
    <div class="myeditprofile">
      <!-- head部分 -->
      <myheader class="top" title="编辑用户资料">
        <span
          class="iconfont iconjiantou"
          @click="$router.back()"
          slot="left"
        ></span>
        <router-link
          class="van-icon van-icon-wap-home-o"
          to="/index"
          slot="right"
        >
        </router-link>
      </myheader>
      <div class="head">
        <img alt="" :src="obj.head_img" />
        <van-uploader :after-read="afterRead" />
      </div>
      <!-- 昵名 -->
      <mycell
        class="mycell"
        title="昵名"
        :content="obj.nickname"
        @click="nicknameshow = !nicknameshow"
      ></mycell>
      <van-dialog
        v-model="nicknameshow"
        title="昵名修改"
        show-cancel-button
        @confirm="changenickname"
        @cancel="newobj.nickname = obj.nickname"
      >
        <van-field label="昵名" required v-model="newobj.nickname" />
      </van-dialog>
      <!-- 密码 -->
      <mycell
        class="mycell"
        title="密码"
        content="******"
        @click="passwordshow = !passwordshow"
      >
      </mycell>
      <van-dialog
        v-model="passwordshow"
        title="昵名修改"
        :before-close="beforeClose"
        show-cancel-button
        @confirm="changepassword"
        @cancel="newobj.oldpass = newobj.newpass = ''"
      >
        <van-field
          label="原密码"
          required
          v-model="newobj.oldpass"
          placeholder="请输入原密码"
          type="password"
        />
        <van-field
          type="password"
          label="新密码"
          required
          v-model="newobj.newpass"
          placeholder="请输入新密码"
        />
      </van-dialog>
      <!-- 性别 -->
      <mycell
        class="mycell"
        title="性别"
        :content="obj.gender == 0 ? '女' : '男'"
        @click="gendershow = !gendershow"
      ></mycell>
      <van-dialog
        v-model="gendershow"
        show-cancel-button
        title="性别修改"
        @confirm="changegender"
        @cancel="newobj.gender = obj.gender"
      >
        <van-picker
          :columns="['女', '男']"
          :default-index="obj.gender"
          @change="onchange"
        />
      </van-dialog>
    </div>
  </div>
</template>

<script>
import myheader from "../components/hmheader.vue";
import mycell from "@/components/hmcell.vue";
import axios from "@/utils/myaxios.js";
import { uploadfile } from "@/apis/upload.js";
import { getUserchangeid, getUserid } from "@/apis/user.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      obj: {},
      newobj: {
        oldpass: "",
        newpass: "",
      },
      nicknameshow: false,
      gendershow: false,
      passwordshow: false,
    };
  },
  components: {
    myheader,
    mycell,
  },
  async mounted() {
    let res = await getUserid(this.$route.params.id);
    // console.log("----", res);
    // if (res.data.message == "获取成功") {
    if (res.status == 200) {
      // console.log(res.data.data);
      //将图片的路径进行补全加上拼接路径
      res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
      this.obj = res.data.data;

      //将obj对象的内容吉祥展开,并赋值给newobj
      this.newobj = { ...this.obj };
      // this.obj.gender = {};
      // console.log(this.obj);
    }
  },
  methods: {
    //密码编辑
    async changepassword() {
      let userobj = JSON.parse(localStorage.getItem("heima-headline-user"));
      if (userobj.password == this.newobj.oldpass) {
        if (/^.{6,18}$/.test(this.newobj.newpass)) {
          if (this.newobj.newpass != this.newobj.oldpass) {
            await getUserchangeid(this.obj.id, {
              password: this.newobj.newpass,
            });
            //更新数据
            userobj.password = this.newobj.newpass;
            //重新修改token上的数据存储
            localStorage.setItem(
              "heima-headline-user",
              JSON.stringify(userobj)
            );
            Toast.success("密码修改成功");
          } else {
            Toast.fail("新密码与原密码相同");
          }
        } else {
          Toast.fail("请输入6-8位密码");
        }
      } else {
        Toast.fail("原密码错误");
      }
    },
    //添加用户体验,提示不正确时不关闭模态框
    beforeClose(action, done) {
      //action指定的是点击的按钮 confirm 确定 / cancel取消
      //点击确认键是
      if (action == "confirm") {
        let userobj = JSON.parse(localStorage.getItem("heima-headline-user"));
        if (userobj.password != this.newobj.password) {
          done(false); //不关闭
        } else {
          //新密码输入不符合要求
          if (!/^.{6,18}$/.test(this.newobj.newpass)) {
            done(false);
          } else {
            done();
          }
        }
      } else {
        done(); //关闭
      }
    },

    //头像编辑
    async afterRead(gl) {
      // console.log(gl.file);
      // console.log(this.obj);
      let formdata = new FormData();
      formdata.append("file", gl.file);
      //实现文件上传
      let res = await uploadfile(formdata);
      // console.log(res);
      if (res.status == 200) {
        //将替换的图片路径替换原来的路径
        this.obj.head_img = axios.defaults.baseURL + res.data.data.url;
        //编辑用户头像
        let newres = await getUserchangeid(this.obj.id, {
          head_img: res.data.data.url,
        });
        Toast.success(res.data.message);
      } else {
        Toast.fail(res.data.message);
      }
    },
    //昵名编辑
    async changenickname() {
      let res = await getUserchangeid(this.obj.id, {
        nickname: this.newobj.nickname,
      });
      this.obj.nickname = this.newobj.nickname;
      Toast.success("修改成功");
    },
    //性别编辑
    onchange(a, b, c) {
      this.newobj.gender = c;
      // console.log(c);
    },
    async changegender() {
      // console.log(5);
      await getUserchangeid(this.obj.id, {
        gender: this.newobj.gender,
      });
      // console.log(2);
      this.obj.gender = this.newobj.gender;
      console.log(this.obj.gender);
      Toast.success("性别修改成功");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  color: red;
}
.head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  /* /deep/ :深度作用选择器 使scoped样式中的选择器能够作用的更深,影响到子组件 */
  /deep/.van-uploader__upload {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    margin: 0;
  }
  /deep/ .van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  img {
    display: block;
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    border-radius: 50%;
  }
}
#app .userchange {
  color: #000;
}
#app .van-icon-wap-home-o {
  color: red;
  font-size: 25px;
}

</style>